<template>
  <div class="container">
    <!-- 主行（左右平分） -->
    <el-row :gutter="10" class="main-row">
      <!-- 左半部分 -->
      <el-col :span="12" class="left-col">
        <!-- 嵌套垂直排列的栅格 -->
        <el-row class="nested-row" direction="vertical">
          <!-- 入库排行 -->
          <el-col class="top-box">
            <div ref="pieRef" class="chart-container"></div>
          </el-col>
          <!-- 出库排行 -->
          <el-col class="bottom-box">
            <div ref="barRef" style="width: 100%; height: 100%"></div>
          </el-col>
        </el-row>
      </el-col>

      <!-- 右半部分 -->
      <el-col :span="12" class="right-col">
        <!-- 嵌套垂直排列的栅格 -->
        <el-row class="nested-row" direction="vertical">
          <el-col class="right-box">
            <div class="tab-container">
              <!-- 标签页组件 -->
              <el-tabs v-model="activeTab" type="border-card">
                <!-- 第一个标签页 -->
                <el-tab-pane label="今日出库" name="inPutTab">
                  <el-table :data="putInRecordList" border stripe>
                    <el-table-column prop="createTime" label="时间" width="180" />
                    <el-table-column prop="goodsName" label="物品" width="200" />
                    <el-table-column prop="count" label="数量" />
                  </el-table>
                </el-tab-pane>

                <!-- 第二个标签页 -->
                <el-tab-pane label="今日入库" name="outPutTab">
                  <el-table :data="takeOutRecordList" style="width: 100%" border>
                    <el-table-column prop="createTime" label="时间" width="180" />
                    <el-table-column prop="goodsName" label="物品" width="200" />
                    <el-table-column prop="count" label="数量" />
                  </el-table>
                </el-tab-pane>

              </el-tabs>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>



<script setup name="Index">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

import { typeData, putInRankData, getPutInRecordByDay, getTakoutRecordByDay } from "@/api/wh/data";

import { parseTime, getFormattedTime } from '@/utils/ruoyi';

// 饼图
const pieRef = ref(null);
let pieChart = null;
const pieData = ref(null);
//
// 获取图表容器引用
const barRef = ref(null);
let barChart = null;
const barData = ref(null);

// 当前激活的标签页
const activeTab = ref('inPutTab');

// 每日入库记录
const putInRecordList = ref([]);
// 每日出库记录
const takeOutRecordList = ref([]);


// 初始化图表
const initPieChart = () => {
  // 确保容器存在
  if (!pieRef.value) return;

  // 初始化实例
  pieChart = echarts.init(pieRef.value);

  // 配置项
  const pieChartOption = {
    title: {
      text: '物品类型占比',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: 'ss{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '物品占比',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 335, name: '入库' },
          { value: 310, name: '出库' },
          { value: 234, name: '退货' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        //
        label: {
          formatter: 'aaaa{b}: {d}%'
        }
      }
    ]
  };
  // 设置配置项
  pieChart.setOption(pieChartOption);
  // 响应式调整
  window.addEventListener('resize', () => {
    pieChart.resize();
  });
};


// 初始化图表
const initBarChart = () => {
  // 确保容器存在
  if (!barRef.value) return;

  // 初始化实例
  barChart = echarts.init(barRef.value);

  // 配置项
  // 图表配置项
  const option = {
    title: {
      text: '物品入库排行',
      left: 'center'
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '数量',
        type: 'bar',
        data: [],
        itemStyle: {
          color: '#5470c6' // 自定义柱条颜色
        },
        barWidth: '60%' // 柱条宽度
      }
    ]
  };
  // 设置配置项
  barChart.setOption(option);
  // 响应式调整
  window.addEventListener('resize', () => {
    barChart.resize();
  });
};



// 生命周期钩子
onMounted(() => {
  initPieChart();
  initBarChart();
});
onUnmounted(() => {
  // 组件卸载时销毁实例
  if (pieChart) {
    window.removeEventListener('resize', () => pieChart.resize());
    pieChart.dispose();
    pieChart = null;
  }
  if (barChart) {
    window.removeEventListener('resize', () => barChart.resize());
    barChart.dispose();
    barChart = null;
  }
});



/** 分类统计 */
function getTypeData() {
  typeData().then(response => {
    pieData.value = response.data;

    let newData = [];
    for (let i = 0; i < pieData.value.length; i++) {
      newData.push({
        value: pieData.value[i].count,
        name: pieData.value[i].typeName
      });
    }

    // 更新图表
    pieChart.setOption({
      series: [{
        data: newData
      }]
    });
  });
}

/** 排行统计 */
function getPutInData() {
  putInRankData().then(response => {
    barData.value = response.data;
    let xAxisData = [];
    let valueData = [];

    for (let i = 0; i < barData.value.length; i++) {
      xAxisData.push(barData.value[i].goodName);
      valueData.push(barData.value[i].count);
    }

    console.log("====xAxisData", xAxisData);
    console.log("====valueData", valueData);
    // 更新图表
    barChart.setOption({
      xAxis: {
        data: xAxisData
      },
      series: [{
        data: valueData
      }]
    });

  });
}

/** 分类统计 */
function getDayPutIn() {
  let day = getFormattedTime();
  getPutInRecordByDay(day).then(response => {
    putInRecordList.value = response.data;


  });
}

function getDayTakeOut() {
  let day = getFormattedTime();
  getTakoutRecordByDay(day).then(response => {
    takeOutRecordList.value = response.data;
  });
}


getTypeData();
getPutInData();

getDayPutIn();
getDayTakeOut();
</script>

<style scoped lang="scss">
.container {
  height: 100vh;
  /* 设置容器高度 */
}

.main-row {
  height: 100%;
}

.left-col,
.right-col {
  height: 100%;
}

.nested-row {
  height: 100%;
  width: 100%;
}

/* 子区域样式 */
.el-col {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.top-box {
  width: 100%;
  height: 50%;
  background-color: #e8f4ff;
}

.bottom-box {
  height: 50%;
  background-color: #f0f9eb;
}

.right-box {
  width: 100%;
  height: 100%;
}

.chart-container {
  width: 100%;
  height: 100%;
}

.tab-container {
  width: 100%;
  height: 100%;
  background: #fff;
}

.statistics-panel {
  padding: 20px;
}

.el-table {
  width: 100%;
  height: 100%;
}

.el-descriptions {
  margin-top: 20px;
}
</style>
